<script setup>
import { ref } from 'vue'
import { getSkusListAPI } from '@/api/skus'
import { useInitTable } from '@/composables/useCommon'
const activeId = ref(0)
const dialogVisible = ref(false)

const {
  loading,
  currentPage,
  limit,
  total,
  tableData,
  getData
} = useInitTable({
  getList: getSkusListAPI,
  onGetListSuccess: (res) => {
    tableData.value = res.list
    total.value = res.totalCount
    if (tableData.value.length > 0) {
      handleChangeActiveId(tableData.value[0].id)
    }
  }
})
const callbackFunction = ref(null)
const open = (callback = null) => {
  callbackFunction.value = callback
  getData(1)
  dialogVisible.value = true
}
let list = ref([])
const form = ref({
  name: '',
  list: []
})
const handleChangeActiveId = (id) => {
  activeId.value = id
  list.value = []
  let item = tableData.value.find(item => item.id === id)
  if (item) {
    list.value = item.default.split(',')
    form.value.name = item.name
  }
}
const submit = () => {
  if (typeof callbackFunction.value === 'function') {
    callbackFunction.value(form)
  }
  dialogVisible.value = false
}

defineExpose({
  open
})
</script>
<template>
  <el-dialog title="规格选择" v-model="dialogVisible" width="80%" top="5vh">
    <el-container style="height: 65vh;">
      <el-aside style="width: 220px;" class="image-aside">
        <div class="top">
          <div @click="handleChangeActiveId(item.id)" class="sku-list" :class="{ 'active': (activeId === item.id) }"
            v-for="(item, index) in tableData" :key="index">
            {{ item.name }}
          </div>
        </div>
        <div class="bottom">
          <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="limit" background
            layout="prev, next" :total="total" />
        </div>
      </el-aside>
      <el-main>
        <el-checkbox-group v-model="form.list">
          <el-checkbox v-for="item in list" border :value="item" :key="item">{{ item }}</el-checkbox>

        </el-checkbox-group>

      </el-main>
    </el-container>
    <template #footer>
      <span>
        <el-button @click=" dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<style scoped>
.image-aside {
  border-right: 1px solid #eee;
  position: relative;
}


.image-aside .top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50px;
  overflow-y: auto;
}

.image-aside .bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  @apply flex items-center justify-center;
}

.sku-list {
  border-bottom: 1px solid #f4f4f4;
  @apply p-3 text-sm cursor-pointer flex items-center text-gray-600;
}

.sku-list:hover,
.active {
  @apply bg-blue-50;
}
</style>
